<template>
  <div>
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="80px"
      class="demo-ruleForm"
      v-if="flag"
    >
      <el-form-item label="属性名称:" prop="name"  style="width: 415px;">
        <el-input v-model="ruleForm.name" clearable placeholder="请输入 属性名称"></el-input>
      </el-form-item>
      <el-form-item label-width="100px">
        <el-button type="primary" @click="submitForm" size="mini"><i class="el-icon-search"></i> 搜索</el-button>
        <el-button @click="resetForm('ruleForm')" size="mini"><i class="el-icon-delete"></i> 清空</el-button>
      </el-form-item>
    </el-form>
    <div style="display: flex; justify-content: space-between;">
      <div>
        <el-button type="primary" size="small" @click="xj"><i class="el-icon-plus"></i> 新增</el-button>
      </div>
      <div>
        <el-button @click="sx" icon="el-icon-refresh" circle></el-button>
        <el-button @click="xs" icon="el-icon-search" circle></el-button>
      </div>
    </div>
    <template>
      <el-table
        :data="tableData"
        border
        stripe
        style="width: 100%; text-align: center; margin-top: 10px;">
        <el-table-column
          type="index"
          label="序号"
          width="50">
        </el-table-column>
        <el-table-column
          prop="propName"
          label="属性名称"
          width="600">
        </el-table-column>
        <el-table-column
          label="属性值"
          width="600">
          <template slot-scope="scope" 
          >
          <el-tag size="medium" v-for="(item,index) in scope.row.prodPropValues" :key="index">{{ item.propValue }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="350">
        <template slot-scope="scope">
          <el-button
            size="small"
            type="primary"
            @click="handleEdit(scope.$index, scope.row)"><i class="el-icon-edit"></i> 编辑</el-button>
          <el-button
            size="small"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"><i class="el-icon-delete"></i> 删除</el-button>
        </template>
      </el-table-column>
      </el-table>
    </template>
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage4"
        :page-sizes="[10, 20, 30, 40, 50, 100]"
        :page-size="10"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
    <el-dialog title="收货地址" :visible.sync="dialogTableVisible">
      <el-table :data="gridData">
        <el-table-column  label="属性名">
          <el-input
            type="text"
            placeholder="请输入内容"
            v-model="gridData.propName"
            maxlength="10"
            show-word-limit
          >
          </el-input>
        </el-table-column>
        <el-table-column label="属性值">
          <el-input
            type="text"
            placeholder="请输入内容"
            v-model="gridData.prodPropValues"
            maxlength="10"
            show-word-limit
          >
          </el-input>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data () {
    return {
      ruleForm: {
        name: ''
      },
      rules: {

      },
      gridData: [
        {
          propName: '',
          prodPropValues: []
        }
      ],
      flag: true,
      total: 0,
      currentPage4: 1,
      page: {
        current: 1,
        size: 10
      },
      dialogTableVisible: false,
      tableData: []
    }
  },
  created () {
    this.getList()
  },
  methods: {
    xj () {
      this.dialogTableVisible = true
    },
    handleEdit (index, row) {
      console.log(index, row)
    },
    handleDelete (index, row) {
      console.log(index, row)
    },
    submitForm () {
      this.page.propName = this.ruleForm.name
      this.getList()
    },
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`)
      this.page.size = val
      console.log(this.page.size)
      this.getList()
    },
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`)
      this.page.current = val
      this.getList()
    },
    sx () {
      this.page.propName = ''
      this.getList()
    },
    resetForm (formName) {
      this.$refs[formName].resetFields()
    },
    xs () {
      if (this.flag === true) {
        this.flag = false
      } else {
        this.flag = true
      }
    },
    getList () {
      this.page.t = new Date().getTime()
      this.$http('apis/prod/spec/page', {
        params: {
          size: this.page.size,
          current: this.page.current,
          propName: this.page.propName
        }
      }).then((res) => {
        console.log(res.data.records)
        this.tableData = res.data.records
        this.total = res.data.total
      })
    }
  }
}
</script>

<style scoped>
.demo-ruleForm{
  display: flex;
}
>>>.el-input__inner{
  height: 28px;
  line-height: 28px;
}
.el-form-item{
  margin-bottom: 14px;
}
>>>.el-table th{
  background-color: #fafafa;
  text-align: center;
  padding: 8px 0;
  font-size: 12px;
  color: rgba(0, 0, 0, .85);
}
>>>.el-table td{
  text-align: center;
  padding: 8px 0;
  font-size: 12px;
}
</style>